<template>
	<view style="min-height: 100vh;height: auto;" :style="'background:rgb(' + dataObj.rgb_color + ');'" class="bgm">
		<cu-custom :isBack="true" :bgColor="'bg-black'" :backColor="'text-white'">
			<block slot="backText"><view class="text-white ">预约车队详情</view></block>
		</cu-custom>
		<!-- <view class="bgmm" :style="'background-image: url('+$isHttp(dataObj.picture)+');background:#000;'"></view> -->
		<!-- <view class="bgmm" :style="'background:rgb(' + dataObj.rgb_color + ');'" style="min-height: 100vh;height: auto;"></view> -->
		<view class="padding-bottom-xl" style="height: auto;color: #f7f4f6;">
			<view class="cu-card article">
				<view class=" shadow padding-sm">
					<view class="flex justify-start">
						<image :src="$isHttp(dataObj.picture)" style="width: 212rpx;height: 300rpx;border-radius: 12rpx;" mode="aspectFill"></image>
						<view class="desc margin-left-sm">
							<view class="flex justify-start margin-top-xs">
								<view class="text-bold ">{{ dataObj.name }}</view>
								<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
							</view>
							<view class="margin-top-sm text-sm">
								人数：{{ dataObj.number }}人
								<text>{{ dataObj.sex_type }}</text>
							</view>
							<!-- <view class="margin-top-xs text-sm">
								价格：93元/位
							</view> -->
							<view class="margin-top-xs text-sm">难度：{{ dataObj.difficulty }}</view>
							<view class="margin-top-xs text-bold">日期：{{ dataObj.date }}</view>
							<view class="margin-top-xs text-bold">时间：{{ dataObj.time }} {{ dataObj.week }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="margin-sm dm flex justify-between">
				<view class="flex justify-start align-center" @click="map">
					<view class="cuIcon-location test-lg text-gray"></view>
					<view>
						<view class="text-bold">{{ dataObj.storeName }}</view>
						<view class="text-sm text-gray">{{ dataObj.address }}</view>
					</view>
				</view>
				<view class="flex justify-end">
					<!-- <view>
						<view></view>
						<view>停车场</view>
					</view> -->
					<view @click="callPhone">
						<image src="../../static/icon/dianhua.png" style="width: 54rpx;height: 40rpx;" mode=""></image>
						<!-- https://huangz-1304473329.cos.ap-chengdu.myqcloud.com/quzuoju/ -->
						<view>电话</view>
					</view>
				</view>
			</view>

			<view class="margin-sm  dm">
				<view class="padding-sm radius margin-top-sm  text-sm solids">
					欢迎来到由
					<text class="text-yellow text-bold">{{ dataObj.nickname }}</text>
					组的局，计费
					<text class="text-yellow text-bold">AA制</text>
					，最终付款方式根据实际情况而定，局内人数满人后，请准时参加，您对我们非常重要哦！
				</view>
				<view class="padding-sm radius margin-top-sm  text-sm solids" v-if="dataObj.over!=1">
					<view
						class="cu-avatar round margin-left lg margin-top"
						:style="'background-image: url(' + item.avatarUrl + ')'"
						v-for="(item, index) in dataObj.users"
						:key="index"
						@click="delSystemUser(item.userId, 0)"
					>
						<view
							class="cu-tag badge"
							:class="{ 'cuIcon-male,bg-blue': item.gender == 1 ? true : false, 'cuIcon-female,bg-pink': item.gender == 1 ? false : true }"
						></view>
						<text v-if="item.id">xx</text>
					</view>
					<view class="cu-avatar round margin-left margin-top lg bg-white" v-for="(item, index) in dataObj.people - dataObj.users.length" :key="index">
						<view class="cuIcon-people"></view>
					</view>
				</view>
				<view class="padding-top-sm flex justify-between" v-if="dataObj.over!=1">
					<view><view v-show="isOpenLinCar" class="cu-btn sm round bg-yellow margin-lr" @click="showModel" data-target="LinCar">开通临时车位</view></view>
					<view class="flex justify-end" v-if="dataObj.users.length < dataObj.people">
						<view class="cu-btn sm round bg-yellow margin-lr" @click="addUser(1, 0)" data-target="systemUser">添加线下男玩家</view>
						<view class="cu-btn sm round bg-yellow" @click="addUser(0, 0)" data-target="systemUser">添加线下女玩家</view>
					</view>
				</view>
				<view class="radius margin-top-sm" v-if="dataObj.temporary > 0 && dataObj.over!=1">
					<view class="text-bold">临时车位</view>
					<view class="padding-sm text-sm">
						<view
							class="cu-avatar round margin-left lg margin-top"
							:style="'background-image: url(' + item.avatarUrl + ')'"
							v-for="(item, index) in dataObj.users1"
							:key="index"
							@click="delSystemUser(item.userId, 1)"
						>
							<view
								class="cu-tag badge"
								:class="{ 'cuIcon-male,bg-blue': item.gender == 1 ? true : false, 'cuIcon-female,bg-pink': item.gender == 1 ? false : true }"
							></view>
						</view>
						<view class="cu-avatar round margin-left lg margin-top" v-for="(item, index) in dataObj.temporary - dataObj.users1.length" :key="index">
							<view class="cuIcon-people "></view>
						</view>
					</view>
				</view>
				<view class="padding-top-sm flex justify-between" v-if="dataObj.temporary > 0 && dataObj.over === 0">
					<view></view>
					<view class="flex justify-end" v-if="dataObj.users1.length < dataObj.temporary">
						<view class="cu-btn sm round bg-yellow margin-lr" @click="addUser(1, 1)" data-target="systemUser">添加线下临时男玩家</view>
						<view class="cu-btn sm round bg-yellow" @click="addUser(0, 1)" data-target="systemUser">添加线下临时女玩家</view>
					</view>
				</view>
				<view class="padding-sm radius margin-top-sm text-center text-xl solids" v-if="dataObj.over==1">
					该车队已解散
				</view>
			</view>
			<van-popup round :show="modelName === 'LinCar'" @close="modelName = ''">
				<view class="text-black" style="width: 500rpx;">
					<view class="cu-form-group margin-top">
						<view class="title">预约日期</view>
						<picker mode="date" :value="date" :start="dataObj.date" :end="endDate" @change="DateChange">
							<view class="picker">{{ date }}</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">预约时间</view>
						<picker mode="time" :value="time" @change="TimeChange">
							<view class="picker">{{ time }}</view>
						</picker>
					</view>
					<button class="cu-btn bg-yellow round lg block" @click="temporaryCar">确认开通</button>
				</view>
			</van-popup>
			<view class="margin-sm radius padding-sm " style="background-color: #252516;">
				<!-- <view>拼车注意事项：</view> -->
				<view>线下用户点击可删除，剧本开始一小时前可删除。</view>
			</view>
			<!-- 			<view class="margin-sm  dm" v-if="false">
				<view class="margin-bottom-sm text-bold text-lg">剧本角色（点击选择角色）</view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view
						@click="showModal"
						data-target="Image"
						:data-index="index"
						v-for="(item, index) in dataObj.role"
						:key="index"
						class="cu-card dm-item scroll-view-item_H radius"
					>
						<image class="radius" :src="$isHttp(item.picture)" mode="aspectFill"></image>
						<view class=" text-center">{{ item.role_name }}</view>
					</view>
				</scroll-view>
			</view> -->

			<view class="margin-sm radius padding-sm " style="background-color: #252516;">
				<!-- <view>拼车注意事项：</view> -->
				<view class="text-sm margin-top-sm" v-html="dataObj.note"></view>
			</view>
			<view class="padding-tb-sm"></view>
		</view>
	</view>
</template>

<script>
import { websocket } from '@/initial.js';
export default {
	data() {
		return {
			modelName: '',

			time: '请选择时间',
			date: '请选择日期',

			dataObj: '',
			id: '',
			preImg: '',
			payInfo: '',

			timeout: 10000, // 30s
			timeoutObj: '',
			userId: ''
		};
	},
	computed: {
		isOpenLinCar: function() {
			if (
				this.dataObj.number === this.dataObj.people && //车队人数加满
				this.dataObj.order_verification === 0 && //车队未核销
				this.$compareDate(
					this.$dateFormat(Date.parse(new Date()), 'Y/m/d H:i:s'),
					this.dataObj.date.split('-')[0] + '/' + this.dataObj.date.split('-')[1] + '/' + this.dataObj.date.split('-')[2] + ' ' + this.dataObj.time
				) && //当前时间大于预约时间
				this.dataObj.temporary === 0
			) {
				return true;
			} else {
				return false;
			}
		}
	},
	watch: {},
	onLoad(option) {
		if (this.vuex_user.id == undefined) {
			this.loginModel = true;
			uni.setStorageSync('carId', option.id);
			this.id = uni.getStorageSync('carId');
		} else {
			this.id = option.id;
			this.$u.api
				.FleetDetails({
					id: option.id,
					userId: this.vuex_user.id
				})
				.then(res => {
					this.dataObj = res.data;
				});
			// .判断是否已连接
			this.checkOpenSocket();
		}
	},
	onBackPress(options) {
		// if (options.from === 'navigateBack') {
		// 	return false;
		// }
		let canNavBack = getCurrentPages();
		if (canNavBack && canNavBack.length > 1) {
			uni.navigateBack({
				delta: 1
			});
		} else {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	},
	onUnload() {
		uni.closeSocket();
		clearInterval(this.timeoutObj);
	},
	methods: {
		temporaryCar() {
			this.$u.adminApi
				.temporaryCar({
					orderId: this.id,
					date: this.date,
					time: this.time
				})
				.then(res => {
					if (res.code === 200) {
						this.dataObj.temporary = res.data.temporary;
						this.modelName = '';
					}
				});
		},
		addUser(i, select) {
			this.$u.adminApi
				.addUserToCar({
					orderId: this.id,
					sex: i,
					select: select
				})
				.then(res => {
					if (res.code === 200) {
						this.$successToast(res.message);
					} else {
						this.$textToast(res.message);
					}
				});
		},
		delSystemUser(id, select) {
			this.userId = id;
			uni.showModal({
				title: '提示',
				content: '确认删除吗',
				success: res => {
					if (res.confirm) {
						this.$u.adminApi
							.delSystemUser({
								orderId: this.id,
								userId: this.userId,
								select: select
							})
							.then(res => {
								if (res.code === 200) {
									if(res.data){
										uni.navigateBack()
									}
								}
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},

		TimeChange(e) {
			this.time = e.detail.value;
		},
		DateChange(e) {
			this.date = e.detail.value;
		},

		login() {
			this.$redirectToIsLoginOk('/pageB/script/AppointmentProgress?id=' + this.id);
		},

		// 判断是否已连接
		checkOpenSocket() {
			uni.sendSocketMessage({
				data: 'ping',
				success: res => {
					return;
				},
				fail: err => {
					// 未连接打开websocket连接
					this.openConnection();
				}
			});
		},
		openConnection() {
			// 打开连接
			// uni.closeSocket(); // 确保已经关闭后再重新打开
			// uni.onSocketClose(function(res) {
			// 	console.log('WebSocket 已关闭！')
			// });
			uni.connectSocket({
				url: websocket + this.vuex_user.id + '/' + this.id,
				// url: 'ws://192.168.1.9:8081/websocket/' + this.vuex_user.id + '/' + this.id,
				success(res) {
					console.log('连接中 connectSocket=', res);
				},
				fail(err) {
					console.log('连接失败 connectSocket=', err);
				},
				complete: () => {
					this.start(); // 检测心跳reset,防止长时间连接导致连接关闭
				}
			});
			uni.onSocketOpen(res => {
				console.log('连接成功');
			});
			this.onSocketMessage(); // 打开成功监听服务器返回的消息
		},
		//	打开成功监听服务器返回的消息
		onSocketMessage() {
			// 消息
			uni.onSocketMessage(res => {
				console.log(res);
				this.getSocketMsg(res.data); // 监听到有新服务器消息
			});
		},
		// 监听到有新服务器消息
		getSocketMsg(reData) {
			// 监听到服务器消息
			this.dataObj.users = JSON.parse(reData).list;
			this.dataObj.users1 = JSON.parse(reData).list1;
			if (this.dataObj.user_status === 0) {
				this.dataObj.user_status = JSON.parse(reData).status;
			}
			console.log('收到服务器消息', JSON.parse(reData));
		},
		// 启动心跳 start
		start() {
			clearInterval(this.timeoutObj);
			this.timeoutObj = setInterval(() => {
				uni.sendSocketMessage({
					data: 'ping',
					success: res => {
						console.log('连接中....');
						console.log(this.timeoutObj);
					},
					fail: err => {
						console.log('连接失败重新连接....1');
						this.openConnection();
						console.log(this.timeoutObj);
					}
				});
			}, this.timeout);
		},

		showModel(e) {
			this.modelName = e.target.dataset.target;
		}
	}
};
</script>

<style lang="scss" scoped>
.canvas-hide {
	/* 1 */
	position: fixed;
	right: 100vw;
	bottom: 100vh;
	/* 2 */
	z-index: -9999;
	/* 3 */
	opacity: 0;
}
.bgm {
	position: relative;
}

.bgmm {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	// background: transparent url(https://huangz-1304473329.cos.ap-chengdu.myqcloud.com/quzuoju/person/girl/2.jpg) center center no-repeat;
	// background-image: url(https://huangz-1304473329.cos.ap-chengdu.myqcloud.com/quzuoju/person/girl/2.jpg);
	// filter: blur(50px);
	z-index: -1;
	background-size: percentage;
}

// 主持人
.supporter {
	background-color: #fff;
}

.padding_top_5 {
	padding-top: 5rpx;
}

.padding_le_10 {
	padding-left: 10rpx;
}

.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.scroll-view-item_H {
	display: inline-block;
}

.dm {
	width: auto;

	.dm-item {
		width: 210rpx;
		height: 300rpx;
		// background-color: #fff;
		margin-left: 15rpx;
		overflow: hidden;

		&:nth-child(1) {
			margin-left: 0;
		}

		image {
			width: 100%;
			height: 100%;
		}

		.text {
		}
	}
}
</style>
